<template>
    <div>
        <mt-cell v-if="show" v-for="s of songs" :key="s.id" is-link :to="'/song/'+s.id" :title="s.name"
                 :label="s.artists[0].name">
            <span>专辑《{{s.album.name}}》</span>
        </mt-cell>
    </div>
</template>
<script>
    import {mapState} from 'vuex';
    import {Indicator, Toast} from 'mint-ui';

    export default {
        name: 'songs',
        data() {
            return {
                show: false
            }
        },
        computed: mapState(['songs']),
        created() {
            this.$store.commit('hideWelcome');
            this.$store.commit('changePlaying', false);
            this.fetch();
        },
        watch: {
            '$route': 'fetch'
        },
        methods: {
            fetch(){
                Indicator.open('加载中...');
                let keyword = this.$route.params.keyword || '';
                this.$store.dispatch("fetch_songs", {s: keyword}).then(() => {
                    Indicator.close();
                    this.show = true;
                }, () => {
                    Indicator.close();
                    Toast({
                        message: '网络加载错误',
                        position: 'bottom'
                    });
                });
            }
        }
    }
</script>